<template>
  <div>
    <div style="font-size: 14px; background: #fff; padding: 10px; border-bottom: 1px solid #ccc; height: 50px">
      <div style="font-size: 16px;float: left; padding-left: 10px;margin-top: 5px">2021年3月</div>
      <el-button-group style="float: right">
        <el-button size="small">上个月</el-button>
        <el-button size="small">今天</el-button>
        <el-button size="small">下个月</el-button>
      </el-button-group>
    </div>
    <el-calendar v-model="value" id="calendar">
      <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
      <template
        slot="dateCell"
        slot-scope="{date, data}">
        <!--自定义内容-->
        <div>
          <div class="calendar-day">{{ data.day.split('-').slice(2).join('-') }}</div>
          <div v-for="item in calendarData" :key="item.months">
            <div v-if="(item.months).indexOf(data.day.split('-').slice(1)[0])!=-1">
              <div v-if="(item.days).indexOf(data.day.split('-').slice(2).join('-'))!=-1">
                <el-tooltip class="item" effect="dark" :content="item.things" placement="right">
                  <div class="is-selected" style="text-align: center;">{{item.things}}</div>
                </el-tooltip>
              </div>
            </div>
          </div>
        </div>
      </template>
    </el-calendar>
  </div>
</template>
<style>
.el-calendar__header {
  display: none;
}
</style>

<script>
export default {
  name: 'calendar_page',
  data () {
    return {
      calendarData: [
        { months: ['03'], days: ['29'], things: '奥林匹克羽毛球决赛' },
        { months: ['03'], days: ['26'], things: '招银大夏游泳' },
        { months: ['03'], days: ['26'], things: '武展乒乓球' },
        { months: ['03'], days: ['27'], things: '武展乒乓球' },
        { months: ['03'], days: ['27'], things: '武展羽毛球' },
        { months: ['03'], days: ['17'], things: '武展羽毛球' },
        { months: ['03'], days: ['17'], things: '武展乒乓球' },
        { months: ['03'], days: ['24'], things: '武展羽毛球' },
        { months: ['03'], days: ['24'], things: '武展乒乓球' },
        { months: ['03'], days: ['10'], things: '武展羽毛球' },
        { months: ['03'], days: ['10'], things: '武展乒乓球' },
        { months: ['03'], days: ['03'], things: 'CBD森特妙羽篮球' },
        { months: ['04'], days: ['01'], things: '千克健身游泳' },
        { months: ['11'], days: ['02'], things: '瑜伽' }
      ],
      value: new Date()
    }
  },
  computed: {
    // 时间高亮的数组
    brightDate () {
      let ary = []
      for (let i in this.calendarData) {
        ary.push(this.calendarData[i].startDate)
      }
      return ary
    }
  },
  methods: {
    // Tooltip 文字提示
    content (date) {
      let content = ''
      for (let i in this.calendarData) {
        if (date === this.calendarData[i].startDate) {
          content = this.calendarData[i].judgeName + ` ` + this.calendarData[i].tribunalName
        }
      }
      console.log(content)
      return content
    }
  }
}
</script>

<style scoped>
  .calendar-day{
    text-align: center;
    color: #202535;
    line-height: 30px;
    font-size: 12px;
  }
  .is-selected{
    color: #F8A535;
    font-size: 10px;
    margin-top: 5px;
  }
  #calendar .el-button-group>.el-button:not(:first-child):not(:last-child):after{
    content: '当月';
  }
</style>
